<template>
  <div
    style="
      background-color: #ffffff;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    "
  >
    <div
      ref="mapSize"
      :style="{ width: '100%', height: divHeight + 'vh' }"
      class="mapInfo"
    >
      <div style="display: flex; flex-direction: row; position: relative">
        <div
          v-loading="loading || loadingQy"
          id="mapDiv"
          ref="mapDiv"
          :style="{ width: '100%', height: divHeight + 'vh' }"
        ></div>
        <div class="selWindow">
          <div style="margin-left: 10px; width: 90%; height: 100%">
            <el-checkbox-group
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
              "
              @change="checkboxChange"
              v-model="checkedList"
            >
              <el-checkbox :label="1">气象</el-checkbox>
              <el-checkbox :label="2">预警</el-checkbox>
              <el-checkbox :label="3">雷达</el-checkbox>
              <el-checkbox :label="4">风向</el-checkbox>
              <el-checkbox :label="5">降水量</el-checkbox>
              <el-checkbox :label="6">相对湿度</el-checkbox>
              <el-checkbox :label="7">天气信息</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="selWindowIcon">
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-100"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-9999"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-1604"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-2385"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-309"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-399"
          />
          <i
            style="
              color: #ffffff;
              background-color: #4f4f4f;
              font-size: 20px;
              border-radius: 50%;
              padding: 5px;
              z-index: 2;
            "
            class="qi-102"
          />
        </div>
      </div>
      <!--    雷达播放图-->
<!--      <div class="radarPane" v-if="controlsOption === 'radar'">-->
      <div class="radarPane" v-if="checkedList.indexOf(3) != -1">
        <div class="colorbar">
          <div class="row-block">
            <div class="one" style="background-color: rgb(1, 160, 246)">小</div>
            <div class="one" style="background-color: rgb(0, 236, 236)"></div>
            <div class="one" style="background-color: rgb(0, 216, 0)"></div>
            <div class="one" style="background-color: rgb(0, 144, 0)"></div>
            <div class="one" style="background-color: rgb(255, 255, 0)"></div>
            <div class="one" style="background-color: rgb(231, 192, 0)"></div>
            <div class="one" style="background-color: rgb(255, 144, 0)">中</div>
            <div class="one" style="background-color: rgb(255, 0, 0)"></div>
            <div class="one" style="background-color: rgb(214, 0, 0)"></div>
            <div class="one" style="background-color: rgb(192, 0, 0)"></div>
            <div class="one" style="background-color: rgb(255, 0, 240)"></div>
            <div class="one" style="background-color: rgb(150, 0, 180)"></div>
            <div class="one" style="background-color: rgb(173, 144, 240)">
              大
            </div>
          </div>
        </div>
        <div class="slider">
          <el-button type="primary" size="mini" @click="playLay"
            >播放</el-button
          >
          <div>
            <el-slider
              v-model="sliderVal"
              :step="1"
              :max="20"
              @change="getSliderVal"
              show-stops
            >
            </el-slider>
            <!--            :format-tooltip="formatTooltip"-->
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div v-show="checkedList.indexOf(7) != -1" class="tqInfo">
        <div class="topWeather">
          <div class="topWeatherInfo">
            <span class="todayWatherTextNew">{{ weatherNowData.location.name }}</span>
            <span class="todayWatherTextTNew">{{handle(weatherNowData.location.path) }}</span>
            <div class="todayWatherTextNewTime">{{ formatDate(weatherNowData.updateTime) }}</div>
            <div class="bodyWeatherWeek">
              <div class="weekInfo" v-for="(item, index) in futureWeatherFifteenList" :key="index">
                <i :class="`qi-${item.iconDay}`"/>
                <div>{{formatDateMonth(item.fxDate)}}</div>
                <div>{{ item.tempMax }}℃</div>
              </div>
            </div>
            <div class="botWeatherAir">
              <div class="botWeatherAirInfo">
                <div class="airInfoTitle">空气质量情况</div>
                <div class="airInfoData">
<!--                  <div class="leftBut">-->
<!--                    <i class="el-icon-arrow-left"/>-->
<!--                  </div>-->
<!--                  <div class="rightBut">-->
<!--                    <i class="el-icon-arrow-right"/>-->
<!--                  </div>-->
                  <div class="zmdMenu" v-for="(item,index) in airWeatherList" :key="index">
                    <div class="fxDate">{{getDayOfWeek(item.fxDate)}}</div>
                    <div class="aqi">{{item.aqi}}</div>
                    <div class="fxDate">{{item.primary}}</div>
                  </div>
                </div>
              </div>
              <div class="weatherDayNight">
                <div class="weatherDayNightInfo" v-for="(item,index) in futureWeatherFifteenList" :key="index">
                  <div class="title">{{getDayOfWeek(item.fxDate)}}</div>
                  <div class="title">{{ item.tempMax }}℃ <span class="dayText">白天</span></div>
                  <div class="title">{{ item.tempMin }}℃ <span class="dayText">夜晚</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="topWeatherText">
            <div class="tempText">{{ weatherNowData.now.temp }}℃</div>
            <div class="dateTemp">{{formatDateMonth(weatherNowData.updateTime)}} {{getDayOfWeek(weatherNowData.updateTime)}}</div>
            <div class="dateTemp">{{futureWeatherFifteenList[0].tempMax}}℃ - {{futureWeatherFifteenList[0].tempMin}}℃</div>
            <div class="weatherInfoSty">
              <span class="titleSty">风向</span>
              <span class="titleValue">{{ weatherNowData.now.windDir }}</span>
            </div>
            <div class="weatherInfoSty">
              <span class="titleSty">风速</span>
              <span class="titleValue">{{ weatherNowData.now.windSpeed }}km/H</span>
            </div>
            <div class="weatherInfoSty">
              <span class="titleSty">等级</span>
              <span class="titleValue">{{ weatherNowData.now.windScale }}级</span>
            </div>
            <div class="weatherInfoSty">
              <span class="titleSty">湿度</span>
              <span class="titleValue">{{ weatherNowData.now.humidity }}%</span>
            </div>
          </div>
        </div>
        <div class="weatherCharts">
          <div
            ref="myLine"
            class="eChartsSty"
          ></div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <detection-point v-if="this.checkedList.indexOf(1) != -1 && !loadingQy" @renderPoints="renderPoints"
                       :newCompanyTqList="newCompanyTqList" class="tableInfo"/>
    </transition>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import detectionPoint from "@/views/mapDisplay/detectionPoint.vue";
import {
  cityInformation,
  csDataLHYLL,
  csDataLHYLLWrinIng,
} from "../../utils/city-information";
import "qweather-icons/font/qweather-icons.css";
import {
  getAirQualityData,
  getWeatherSearch,
  newWarningInfo, newWarningInfoData,
  warnIngInfo,
  warningInfoNew,
  weatherInfo,
  weatherInfoForSeenDay,
  weatherInfoForTreeHons,
} from "../../api/cityInfo";
import {formatDate, formatDateDay, formatDateMonth, formatDateTime, getFX} from "../../utils";
import * as echarts from "echarts";
import item from "@/layout/components/Sidebar/Item.vue";
import newCity from "../../utils/city-infoJson/newCity.json"

import { mapState } from "vuex";
import axios from "axios";
import {pageResize} from "@/utils/resetSize";

export default {
  name: "index",
  components:{
    detectionPoint
  },
  data() {
    return {
      loading: false,
      loadingQy: false,
      sliderVal: 0,
      radio: "3",
      map: null,
      myImageLayer: [],
      AMap: null,
      companyTqList: [],
      newCompanyTqList: [],
      companyYjList: [],
      polygon: null,
      listTq: [],
      listNewTq: [],
      listYj: [],
      listFx: [],
      listJs: [],
      listSd: [],
      adcodes: [371526, 371581, 371503, 371502, 371525, 371524, 371521, 371522], //聊城市各区县
      leiDanfoData: [],
      lastDatar: null,
      weatherLastDatar: null,
      leiDaLastDatar: null,
      checkedList: [7],
      futureWeatherList: [],
      futureWeatherFifteenList: [],
      weatherNowData: {
        location:{ name: "聊城市", path: "山东省,中国" },
        now:{}
      },
      chart: null,
      dragging: false,
      scrollContainer: {},
      divHeight: 78,
      listMake: [],
      newCityMap:[],
      airWeatherList:[],
      renderPointsList:undefined
    };
  },
  created() {
    this.radio = this.$route.query.radio || "";
    setTimeout(()=>{
      this.info();
      this.getFutureWeather();
    },1000)
    this.getWeatherNow();
    this.getAirQualityList()
    this.getWeatherNewSearch()
    this.getFutureWeatherForFifteen();
  },
  mounted() {
    // this.setOptionsChar();
  },
  computed: {
    // 获取 controlsOption 状态
    controlsOption() {
      return this.$store.state.controls.controlsOption;
    },
    markerTitle() {
      return this.$store.state.controls.markerTitle;
    },
    playTriggered() {
      return this.$store.state.controls.playTriggered;
    },
  },
  watch: {
    controlsOption(newVal) {
      if (newVal === "atmosphere") {
        if (this.companyTqList.length == 0) {
          if (this.weatherLastDatar) {
            clearInterval(this.weatherLastDatar);
          }
          this.getWeather();
          this.getNewWeather()
          // 设置15分钟定时器
          this.weatherLastDatar = setInterval(() => {
            this.getWeather();
            this.getNewWeather()
          }, 1000 * 60 * 15);
        } else {
          this.emptyingPointsTq();
          this.emptyingPointsNewTq();
          this.setMarker();
          this.setNewMarker();
        }
        clearInterval(this.leiDaLastDatar);
        this.map.remove(this.myImageLayer);
      } else if (newVal === "radar") {
        if (this.leiDaLastDatar) {
          clearInterval(this.leiDaLastDatar);
        }
        this.getLeiDaInfo();
        // 设置15分钟定时器
        this.leiDaLastDatar = setInterval(async () => {
          if (this.myImageLayer.length > 0) {
            this.map.remove(this.myImageLayer);
          }
          await this.getLeiDaInfo();
        }, 1000 * 60 * 15);
        if (this.weatherLastDatar) {
          clearInterval(this.weatherLastDatar);
        }
        this.emptyingPointsTq();
        this.emptyingPointsNewTq();
      }
    },
    markerTitle(newVal){
      if (this.checkedList.indexOf(1) != -1) {
        if (this.companyTqList.length == 0) {
          if (this.weatherLastDatar) {
            clearInterval(this.weatherLastDatar);
          }
          this.getWeather();
          this.getNewWeather();
          this.weatherLastDatar = setInterval(() => {
            this.getWeather();
            this.getNewWeather();
          }, 1000 * 60 * 10);
        } else {
          this.emptyingPointsTq();
          this.emptyingPointsNewTq();
          this.setMarker();
          this.setNewMarker();
        }
      } else {
        this.$message.warning('请点击气象功能')
      }
    },
    playTriggered(newVal) {
      if (newVal) {
        this.playLay();
        // 重置状态以避免重复触发
        this.$store.dispatch("controls/resetPlayTriggered");
      }
    },
  },
  methods: {
    formatDateDay,
    formatDate,
    formatDateMonth,
    handle(value) {
      let list = value.split(",");
      return list[list.length - 2] + "/" + list[list.length - 1];
    },
    async getWeatherNewSearch(){
      await getWeatherSearch().then(res =>{
        if (res.code == 200){
          this.newCityMap = res.data
        }
      })
    },
    //初始化地图
    info() {
      let that = this;
      let map = null;
      window._AMapSecurityConfig = {
        securityJsCode: "41e17bd194dc80120ab5e431f6e5264e",
      };
      AMapLoader.load({
        key: "e9f5683c5fe13b606dc1179f1e503062", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MapType",
          "AMap.Geolocation",
          "AMap.DistrictSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(async (AMap) => {
          let obj = {
            center: [114.890829, 36.911746],
            resizeEnable: true,
            showLabel: true,
            viewMode: "3D",
            expandZoomRange: true,
            zoom: 9.5,
          };
          map = new AMap.Map("mapDiv", obj);

          // 地图添加各种控件
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          // map.addControl(new AMap.Geolocation())
          //获取边界坐标点
          AMap.plugin("AMap.DistrictSearch", function () {
            let districtSearch = new AMap.DistrictSearch({
              // 关键字对应的行政区级别，共有5种级别
              level: "province",
              //  是否显示下级行政区级数，1表示返回下一级行政区
              subdistrict: 0,
              // 返回行政区边界坐标点
              extensions: "all",
            });

            districtSearch.search("聊城", (status, result) => {
              // 查询成功时，result即为对应的行政区信息
              let bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (let i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  let polygon = new AMap.Polygon({
                    map: map, // 指定地图对象
                    strokeWeight: 2, // 轮廓线宽度
                    path: bounds[i], //轮廓线的节点坐标数组
                    fillOpacity: 0.6, //透明度
                    fillColor: "", //填充颜色
                    strokeColor: "#3a8670", //线条颜色
                  });
                  polygon.on("click", (value) => {
                    that.getTwoHoursWeather(value.lnglat.lat, value.lnglat.lng);
                  });
                }
              }
            });
          });
          map.setCenter([115.9984837, 36.4551603]);
          that.map = map;
          that.AMap = AMap;
          map.on("click", (value) => {
            that.getTwoHoursWeather(value.lnglat.lat, value.lnglat.lng);
          });
          // that.getMapControl([371500])//聊城市

          // if (that.radio == 1) {
          //   that.weatherLastDatar = setInterval(async () => {
          //     await that.getWeather();
          //   }, 1000 * 60 * 15);
          //   if (that.leiDaLastDatar) {
          //     clearInterval(that.leiDaLastDatar);
          //   }
          // } else if (that.radio == 2) {
          //   if (that.weatherLastDatar) {
          //     clearInterval(that.weatherLastDatar);
          //   }
          //   if (that.leiDaLastDatar) {
          //     clearInterval(that.leiDaLastDatar);
          //   }
          //   let oldData = localStorage.getItem("nowDataTime");
          //   if (oldData == null) {
          //     await that.getWarning();
          //   } else {
          //     let date = new Date(oldData).getTime();
          //     let nowData = new Date().getTime();
          //     let diff = nowData - date;
          //     if (diff >= 1000 * 60 * 60 * 6) {
          //       await that.getWarning();
          //     } else {
          //       that.companyYjList = JSON.parse(
          //         localStorage.getItem("companyYjList")
          //       );
          //       await that.setMarkerWarning();
          //     }
          //   }
          // } else {
          //   if (that.weatherLastDatar) {
          //     clearInterval(that.weatherLastDatar);
          //   }
          //   await that.getLeiDaInfo();
          //   that.leiDaLastDatar = setInterval(async () => {
          //     if (that.myImageLayer.length > 0) {
          //       that.map.remove(that.myImageLayer);
          //     }
          //     await that.getLeiDaInfo();
          //   }, 1000 * 60 * 15);
          // }
        })
        // .catch((e) => {
        //   console.log("错误", e);
        // });
    },
    //获取实时天气信息
    async getWeather() {
      this.loading = true;
      this.companyTqList = [];
      //清空点坐标
      this.emptyingPointsTq();
      cityInformation.map(async (item) => {
        let resJson = await weatherInfo({
          location: item.id,
          lang: "zh",
          cityName: item.name,
        });
        let res = await JSON.parse(resJson.data);
        this.companyTqList.push({
          ...item,
          ...res.now,
        });
        if (cityInformation.length <= this.companyTqList.length) {
          await this.setMarker();
        }
      });
      // this.companyTqList = csDataLHYLL
      await this.setMarker();
    },
    //渲染实时天气点数据
    async setMarker() {
      let that = this;
      this.listTq = [];
      this.companyTqList.map(async (item) => {
        let info = [];
        info.push(
          '<div class="mapMakerInfo">' +
          '<div class="titleMaker" style="display: flex;">' +
            '<div class="makerTitleSty">${name} ${text}</div><div class="makerTitleStyVal">${obsTime}</div>' +
          '</div>'
        );
        info.push('<div class="makerData"><div class="makerDataTitle">温度</div><div class="makerValSty">${temp}℃</div></div>')
        // info.push(
        //   '<p><span>风向 : ${windDir}</span><span style="margin-left: 15px;">风力等级 : ${windScale}</span></p>'
        // );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">风速</div><div class="makerVal">${windSpeed} km/H</div><div class="makerVal" style="margin-left: 0.5rem;">${windDir}</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">降水量</div><div class="makerVal">${precip} mm/H</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">气压</div><div class="makerVal">${pressure} Hpa</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">能见度</div><div class="makerVal">${vis} km</div></div>'
        );
        info.push('<div class="makerData"><div class="makerDataTitle">相对湿度</div><div class="makerVal">${humidity}%</div></div></div></div>');

        let data = info.join("");
        // data = data.replace('${icon}', item.icon)
        data = data.replace("${name}", item.name);
        data = data.replace("${text}", item.text);
        data = data.replace("${obsTime}", formatDateTime(item.obsTime));
        data = data.replace("${temp}", item.temp);
        data = data.replace("${windDir}", item.windDir);
        data = data.replace("${windScale}", item.windScale);
        data = data.replace("${windSpeed}", item.windSpeed);
        data = data.replace("${humidity}", item.humidity);
        data = data.replace("${precip}", item.precip);
        data = data.replace("${pressure}", item.pressure);
        data = data.replace("${vis}", item.vis);
        let infoWindow = new AMap.InfoWindow({
          content: data,
          offset: new AMap.Pixel(10, -10),
        });
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 20px" class="qi-${item.icon}"/><div style="font-size: 14px">${item.temp}℃</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          // offset: new AMap.Pixel(-13, -30)
        });
        marker.on("mouseover", function () {
          infoWindow.open(that.map, [
            marker.getPosition().lng,
            marker.getPosition().lat,
          ]);
        });
        marker.on("mouseout", function () {
          infoWindow.close();
        });
        this.listTq.push(marker);
      });
      this.loading = false;
    },

    //获取区域点天气信息
    async getNewWeather(){
      this.loadingQy = true;
      this.newCompanyTqList = [];
      //清空区域点坐标
      this.emptyingPointsNewTq();
      let date = new Date()
      date.setHours(date.getHours() - 1);
      let endtime = formatDate(date).replace(/-/g,"/")
      date.setHours(date.getHours() - 2);
      let stateTime = formatDate(date).replace(/-/g,"/")
      let list = []
      this.newCityMap.map(async (item) =>{
        list.push(item.STATIONCODE)
      })
      await newWarningInfoData({STATIONCODE:list,endtime,stateTime}).then(async res => {
        if (res.code == 200) {
          this.newCompanyTqList = res.data
          await this.setNewMarker();
        }
      })
    },
    //渲染区域点天气信息
    async setNewMarker(){
      let list = []
      if (this.renderPointsList != undefined){
        list = this.renderPointsList
      }else {
        list = this.newCompanyTqList
      }
      let that = this;
      this.listNewTq = [];
      list.map(async (item) => {
        let info = [];
        info.push(
          '<div class="mapMakerInfo">' +
          '<div class="titleMaker" style="display: flex;">' +
          '<div class="makerTitleSty">${text}</div><div class="makerTitleStyVal">${obsTime}</div>' +
          '</div>'
        );
        info.push('<div class="makerData"><div class="makerDataTitle">温度</div><div class="makerValSty">${temp}℃</div></div>')
        // info.push(
        //   '<p><span>风向 : ${windDir}</span><span style="margin-left: 15px;">风力等级 : ${windScale}</span></p>'
        // );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">风速</div><div class="makerVal">${windSpeed} km/H</div><div class="makerVal" style="margin-left: 0.5rem;">${windDir}</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">降水量</div><div class="makerVal">${precip} mm/H</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">气压</div><div class="makerVal">${pressure} Hpa</div></div>'
        );
        info.push(
          '<div class="makerData"><div class="makerDataTitle">能见度</div><div class="makerVal">${vis} km</div></div>'
        );
        info.push('<div class="makerData"><div class="makerDataTitle">相对湿度</div><div class="makerVal">${humidity}%</div></div></div></div>');

        let data = info.join("");
        // data = data.replace('${icon}', item.icon)
        data = data.replace("${text}", item.STATIONNAME||'0');
        data = data.replace("${temp}", item.AIRTEMP_CURRENT_VALUE||'0');
        data = data.replace("${obsTime}", formatDateTime(item.HAPPENTIME));
        data = data.replace("${windDir}", getFX(item.WIND_CURRENT_DIRVALUE));
        data = data.replace("${windScale}", item.WIND_CURRENT_POWERVALUE||'0');
        data = data.replace("${windSpeed}", item.WIND_CURRENT_SPEEDVALUE||'0');
        data = data.replace("${humidity}", item.RH_CURRENT_VALUE||'0');
        data = data.replace("${precip}", item.RAIN_SUM_CURHOUR_VALUE||'0');
        data = data.replace("${pressure}", item.SEAPRESSURE_CURRENT_VALUE||'0');
        data = data.replace("${vis}", item.VISIBILITY_CURRENT_VALUE||'0');
        let markerCont = `<div style="color: #393eff">
<!--                        <div style="font-size: 8px">${item.AIRTEMP_CURRENT_VALUE}℃</div>-->
                        <div style="width: 6px;height:6px;border-radius: 50%;background-color: #ffffff;border: 2px solid #5b5b5b"></div>
                    </div>`
        let markerContName = `<div style="color: #393eff">
                        <div style="width: 80px;font-size: 10px">${item.STATIONNAME}</div>
<!--                        <div style="font-size: 8px">${item.AIRTEMP_CURRENT_VALUE}℃</div>-->
                        <div style="width: 6px;height:6px;border-radius: 50%;background-color: #ffffff;border: 2px solid #5b5b5b"></div>
                    </div>`
        let infoWindow = new AMap.InfoWindow({
          content: data,
          offset: new AMap.Pixel(10, -10),
        });
        let marker = new AMap.Marker({
          content: that.$store.state.controls.markerTitle?markerContName:markerCont,
          map: this.map,
          position: new AMap.LngLat(item.STATIONLON, item.STATIONLAT),
          // offset: new AMap.Pixel(-13, -30)
        });
        marker.on("mouseover", function () {
          infoWindow.open(that.map, [
            marker.getPosition().lng,
            marker.getPosition().lat,
          ]);
        });
        marker.on("mouseout", function () {
          infoWindow.close();
        });
        this.listNewTq.push(marker);
      });
      this.loadingQy = false;
    },
    //根据选中数据渲染天气点信息
    async renderPoints(list){
      this.renderPointsList = list
      this.emptyingPointsNewTq()
      await this.setNewMarker();
    },
    //获取预警数据
    async getWarning() {
      this.loading = true;
      this.emptyingPointsYj();
      this.companyYjList = [];
      cityInformation.map(async (item) => {
        let resJson = await warnIngInfo({
          location: item.id,
          lang: "zh",
          cityName: item.name,
        });
        let res = await JSON.parse(resJson.msg);
        // let resJson = await warningInfoNew()
        // let resJsonNew = resJson.msg.replace(/\uFEFF/, '');//处理ZWNBSP (零宽度不断行空格)
        // let res = JSON.parse(resJsonNew)

        if (res.warning.length != 0) {
          this.companyYjList.push({
            ...item,
            warning: res.warning[0],
          });
        } else {
          this.companyYjList.push({ ...item });
        }
        if (cityInformation.length <= this.companyYjList.length) {
          localStorage.setItem("nowDataTime", formatDate(new Date()));
          localStorage.setItem(
            "companyYjList",
            JSON.stringify(this.companyYjList)
          );
          this.loading = false;
          await this.setMarkerWarning();
        }
      });
      // this.companyYjList = csDataLHYLLWrinIng
      // await this.setMarkerWarning()
    },
    //渲染预警点数据
    async setMarkerWarning() {
      let that = this;
      this.listYj = [];
      this.companyYjList.map(async (item) => {
        if (item.warning) {
          let info = [];
          info.push(
            '<div style="padding:7px 0px 0px 0px;width: 400px"><div style="font-size: 16px"><span style="padding: 10px;font-weight: 600;color: ${color}">${title}</span></div>'
          );
          info.push(
            '<p style="padding: 10px;border-top: 0.5px solid #7a7a7a">预警详细 : ${text}</p></div></div>'
          );

          let data = info.join("");
          data = data.replace("${title}", item.warning.title);
          data = data.replace("${color}", item.warning.severityColor);
          data = data.replace("${text}", item.warning.text);
          let infoWindow = new AMap.InfoWindow({
            content: data,
            offset: new AMap.Pixel(5, -30),
          });
          const newIcon = new AMap.Icon({
            size: new AMap.Size(50, 50), // 图标尺寸
            image: require(`../../assets/mapWrinIngImage/${item.warning.type}-${item.warning.severityColor}.jpg`), // Icon的图像
            imageSize: new AMap.Size(50, 50), // 图标尺寸
          });
          let marker = new AMap.Marker({
            map: this.map,
            position: new AMap.LngLat(item.lon, item.lat),
            offset: new AMap.Pixel(-13, -75),
            icon: newIcon,
          });
          marker.on("mouseover", function () {
            infoWindow.open(that.map, [
              marker.getPosition().lng,
              marker.getPosition().lat,
            ]);
          });
          marker.on("mouseout", function () {
            infoWindow.close();
          });
          this.listYj.push(marker);
        }
      });
    },
    // getRadioVal(){
    //   this.info()
    // },
    //获取雷达图层信息
    async getLeiDaInfo() {
      let nowTime = new Date();
      nowTime.setHours(nowTime.getHours() - 2);
      nowTime.setSeconds(nowTime.getSeconds() - 60 * 6);
      this.leiDanfoData = [];
      for (let x = 0; x < 20; x++) {
        nowTime.setSeconds(nowTime.getSeconds() + 60 * 6);
        let year = nowTime.getFullYear().toString();
        let month =
          nowTime.getMonth() + 1 < 10
            ? "0" + (nowTime.getMonth() + 1)
            : nowTime.getMonth() + 1;
        let date =
          nowTime.getDate() < 10 ? "0" + nowTime.getDate() : nowTime.getDate();
        let hours =
          nowTime.getHours() < 10
            ? "0" + nowTime.getHours()
            : nowTime.getHours();
        let seconds =
          nowTime.getMinutes() < 10
            ? "0" + nowTime.getMinutes()
            : nowTime.getMinutes();
        this.leiDanfoData.push({
          // url:`http://sdsqxt.cn:15010/products/Radar/Sradar/${year}/${month}/${date}/${year.substring(2,4)}${month}${date}${hours}${seconds}_000.png`,
          url: `https://mail.aid-bee.cn/prod-api/profile/leida/${year.substring(
            2,
            4
          )}${month}${date}${hours}${seconds}_000.png`,
          // url:`${window.location.origin}/prod-api/profile/leida/${year.substring(2,4)}${month}${date}${hours}${seconds}_000.png`,
          time: formatDate(nowTime),
        });
      }
      // let httpUrl = 'https://api.seniverse.com/v4?fields=precip_minutely_fcst_map&key=SfOcYG07nsrQQ2w8G'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.leiDanfoData = res.precip_minutely_fcst_map[0]
      this.setImageLeiDaInfo(this.leiDanfoData || []);
    },
    //渲染雷达数据
    setImageLeiDaInfo(data) {
      let that = this;
      let imageLayer = new AMap.ImageLayer({
        url: data[that.sliderVal].url,
        // bounds: new AMap.Bounds(
        //   [63.8148899733, 12.7700338517],//33.67500114440918,114.49499893188477
        //   [143.536486117, 56.3833398551]//38.78834614440918,123.83789114440918
        // ),
        bounds: new AMap.Bounds(
          [114.494998931, 33.6750011444], //33.6750011444,114.494998931
          [123.837891144, 38.7883461444] //38.7883461444,123.8378911444
        ),
        zooms: [1, 20],
        opacity: 1,
      });
      this.map.add(imageLayer);
      this.myImageLayer.push(imageLayer);
    },
    //渲染风向信息
    // setMarkerFx() {
    //   this.listFx = [];
    //   this.companyTqList.map(async (item) => {
    //     let marker = new AMap.Marker({
    //       content: `<div style="width: 80px;color: #393eff">
    //         <span style="font-size: 14px">
    //           ${item.windDir}${item.windScale}级
    //           </span>
    //         </div>`,
    //       map: this.map,
    //       position: new AMap.LngLat(item.lon, item.lat),
    //       offset: new AMap.Pixel(-10, -20),
    //     });
    //     this.listFx.push(marker);
    //   });
    // },

    setMarkerFx() {
      this.listFx = [];
      this.companyTqList.map(async (item) => {
        // 根据风向设置图片路径
        let windDirImageMap = {
          北风: require("../../assets/images/beifeng.png"),
          东北风: require("../../assets/images/dongbeifeng.png"),
          东风: require("../../assets/images/dongfeng.png"),
          东南风: require("../../assets/images/dongnanfeng.png"),
          南风: require("../../assets/images/nanfeng.png"),
          西南风: require("../../assets/images/xinanfeng.png"),
          西风: require("../../assets/images/xifeng.png"),
          西北风: require("../../assets/images/xibeifeng.png"),
        };

        let imagePath =
          windDirImageMap[item.windDir] || require("../../assets/images/xifeng.png"); // 默认图片路径

        let marker = new AMap.Marker({
          content: `<div style="width: 80px; color: #393eff">
                  <img src="${imagePath}" alt="${item.windDir}" style="width: 30px; height: 30px;">
                  <span style="font-size: 14px">${item.windScale}级</span>
                </div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(-10, -20),
        });
        this.listFx.push(marker);
      });
    },
    //渲染降水信息
    setMarkerJs() {
      this.listJs = [];
      this.companyTqList.map(async (item) => {
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 18px" class="qi-309"/><div style="font-size: 12px">${item.precip}mm/h</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(-50, 5),
        });
        this.listJs.push(marker);
      });
    },
    //渲染湿度信息
    setMarkerSd() {
      this.listSd = [];
      this.companyTqList.map(async (item) => {
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 18px" class="qi-399"/><div style="font-size: 12px">${item.humidity}%</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(40, 5),
        });
        this.listSd.push(marker);
      });
    },
    //格式化 Tooltip
    formatTooltip(val) {
      if (this.leiDanfoData?.data) {
        return formatDate(this.leiDanfoData.data[val].time);
      } else {
        return val;
      }
    },
    getSliderVal() {
      this.map.remove(this.myImageLayer);
      this.myImageLayer = [];
      this.setImageLeiDaInfo(this.leiDanfoData || []);
    },

    //播放雷达图层
    playLay() {
      if (!this.lastDatar) {
        this.lastDatar = setInterval(() => {
          this.getSliderVal();
          this.sliderVal++;
          if (this.sliderVal == 20) {
            this.sliderVal = 0;
            this.getSliderVal();
            clearInterval(this.lastDatar);
            this.lastDatar = null;
          }
        }, 1000);
      }
    },
    //清空气象点坐标
    emptyingPointsTq() {
      if (this.listTq.length != 0) {
        this.listTq.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listTq);
      }
      this.listTq = [];
    },
    //清空区域站点坐标
    emptyingPointsNewTq(){
      if (this.listNewTq.length != 0) {
        this.listNewTq.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listNewTq);
      }
      this.listNewTq = [];
    },
    //清空预警点坐标
    emptyingPointsYj() {
      if (this.listYj.length != 0) {
        this.listYj.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listYj);
      }
      this.listYj = [];
    },
    //清空风向点坐标
    emptyingPointsFx() {
      if (this.listFx.length != 0) {
        this.listFx.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listFx);
      }
      this.listFx = [];
    },
    //清空降水点坐标
    emptyingPointsJs() {
      if (this.listJs.length != 0) {
        this.listJs.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listJs);
      }
      this.listJs = [];
    },
    //清空湿度点坐标
    emptyingPointsSd() {
      if (this.listSd.length != 0) {
        this.listSd.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listSd);
      }
      this.listSd = [];
    },
    //
    checkboxChange() {
      //气象
      if (this.checkedList.indexOf(1) != -1) {
        if (this.companyTqList.length == 0) {
          if (this.weatherLastDatar) {
            clearInterval(this.weatherLastDatar);
          }
          this.getWeather();
          this.getNewWeather();
          this.weatherLastDatar = setInterval(() => {
            this.getWeather();
            this.getNewWeather();
          }, 1000 * 60 * 10);
        } else {
          this.emptyingPointsTq();
          this.emptyingPointsNewTq();
          this.setMarker();
          this.setNewMarker();
        }
      } else {
        if (this.weatherLastDatar) {
          clearInterval(this.weatherLastDatar);
        }
        this.emptyingPointsTq();
        this.emptyingPointsNewTq();
      }
      //预警
      if (this.checkedList.indexOf(2) != -1) {
        if (this.companyYjList.length == 0) {
          let oldData = localStorage.getItem("nowDataTime");
          if (oldData == null) {
            this.getWarning();
          } else {
            let date = new Date(oldData).getTime();
            let nowData = new Date().getTime();
            let diff = nowData - date;
            if (diff >= 1000 * 60 * 60 * 6) {
              this.getWarning();
            } else {
              this.companyYjList = JSON.parse(
                localStorage.getItem("companyYjList")
              );
              this.setMarkerWarning();
            }
          }
        } else {
          this.emptyingPointsYj();
          this.setMarkerWarning();
        }
      } else {
        this.emptyingPointsYj();
      }
      //雷达
      if (this.checkedList.indexOf(3) != -1) {
        this.$store.dispatch("controls/setControlsOption", 'radar');
        if (this.leiDaLastDatar) {
          clearInterval(this.leiDaLastDatar);
        }
        this.getLeiDaInfo();
        this.leiDaLastDatar = setInterval(async () => {
          if (this.myImageLayer.length > 0) {
            this.map.remove(this.myImageLayer);
          }
          await this.getLeiDaInfo();
        }, 1000 * 60 * 15);
      } else {
        this.$store.dispatch("controls/setControlsOption", '');
        if (this.leiDaLastDatar) {
          clearInterval(this.leiDaLastDatar);
        }
        this.map.remove(this.myImageLayer);
      }
      //风向
      if (this.checkedList.indexOf(4) != -1) {
        this.emptyingPointsFx();
        this.setMarkerFx();
      } else {
        this.emptyingPointsFx();
      }
      //降水量
      if (this.checkedList.indexOf(5) != -1) {
        this.emptyingPointsJs();
        this.setMarkerJs();
      } else {
        this.emptyingPointsJs();
      }
      //相对湿度
      if (this.checkedList.indexOf(6) != -1) {
        this.emptyingPointsSd();
        this.setMarkerSd();
      } else {
        this.emptyingPointsSd();
      }

      if (this.checkedList.indexOf(7) != -1) {
        this.divHeight = 78;
        this.setOptionsChar();
      } else {
        this.divHeight = 78;
      }
    },
    //获取未来7天天气预报
    async getFutureWeatherForFifteen() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/hourly.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&hours=24'
      // let httpUrl = 'https://api.seniverse.com/v3/weather/daily.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&days=15'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.futureWeatherFifteenList = res.results[0].daily
      let resJson = await weatherInfoForSeenDay({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.futureWeatherFifteenList = res.daily;
    },
    //获取空气质量数据
    async getAirQualityList(){
      getAirQualityData({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      }).then(resJson =>{
        let res = JSON.parse(resJson.data);
        this.airWeatherList = res.daily
      })
    },
    //获取实时天气
    async getWeatherNow() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/now.json?key=SfOcYG07nsrQQ2w8G&location=聊城&language=zh-Hans&unit=c'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.weatherNowData = res.results[0]
      let resJson = await weatherInfo({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.weatherNowData = res;
      this.weatherNowData.location = { name: "聊城市", path: "山东省,中国" };
    },
    //获取未来24小时天气
    async getFutureWeather() {
      // let httpUrl = 'https://api.seniverse.com/v3/weather/hourly.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&hours=24'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.futureWeatherList = res.results[0].hourly
      // await this.setOptionsChar()
      let resJson = await weatherInfoForTreeHons({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.futureWeatherList = res.hourly;
      await this.setOptionsChar();
    },

    //24小时折线图
    setOptionsChar() {
      let that = this;
      let xAxData = [];
      let serData = [];
      this.futureWeatherList.forEach((item, index) => {
        const date = new Date(item.fxTime);
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");
        xAxData.push(`${hours}:${minutes}`);
        serData.push({
          value: Number(item.temp),
          text: `${Number(item.temp)}℃ ${item.text}`,
          position: index % 2 === 0 ? "top" : "bottom", // 偶数索引在上方，奇数索引在下方
        });
      });
      this.chart = echarts.init(this.$refs.myLine);
      let myChart = {
        title: {
          text: "聊城市24小时预报",
          textStyle: {
            color: "#515974",
            fontWeight: "800",
            fontSize: "13px",
          },
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          extraCssText:'background-color: #01CFC7;color: #ffffff;border-radius: 1rem',
          formatter: function (data) {
            let tqQkText = that.futureWeatherList[data[0].dataIndex].text;
            let humidity = that.futureWeatherList[data[0].dataIndex].humidity;
            let windDir = that.futureWeatherList[data[0].dataIndex].windDir;
            let windSpeed = that.futureWeatherList[data[0].dataIndex].windSpeed;
            return (data[0].axisValue +
              "<br/>" +
              tqQkText +
              "" +
              data[0].value +
              "℃<br/>相对湿度:" +
              humidity +
              "%<br/>" +
              windDir +
              windSpeed +
              "km/h"
            );
          },
        },
        xAxis: {
          type: "category",
          data: xAxData,
          axisLine: {
            show:false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false // 隐藏y轴的数值标签
          },
          splitLine: {
            show: true, // 保留分割线
            lineStyle: {
              type: "dashed"
            }
          },
        },
        grid:{
          left:'2%',
          top: '20%',
          bottom:'40%'
        },
        series: [
          {
            data: serData.map((item) => ({
              value: item.value,
            })),
            type: "line",
            itemStyle: {
              normal: {
                color: "#01CFC7",
                borderColor: "#01CFC7",
                borderWidth: 2,
                lineStyle: {
                  color: "#01CFC7",
                },
              },
            },
          },
        ],
      };
      this.chart.setOption(myChart);
    },
    //获取未来2小时天气预报
    async getTwoHoursWeather(lat, lng) {
      let newLat = lat.toFixed(2);
      let newLng = lng.toFixed(2);
      // let httpUrl = `https://api.seniverse.com/v4?fields=precip_minutely&key=SfOcYG07nsrQQ2w8G&locations=${lat}:${lng}`
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // let resJson = await weatherInfo({location:newLng+','+newLat,lang:'zh',cityName:'聊城'})
      // let res = JSON.parse(resJson.data)
      let httpUrl = `https://devapi.qweather.com/v7/minutely/5m?location=${
        newLng + "," + newLat
      }&lang=zh&key=cc977749066e45cca107881c1fbaf061`;
      let resJson = await fetch(httpUrl);
      let res = await resJson.json();
      if (this.listMake.length > 0) {
        this.map.remove(this.listMake);
        this.listMake = [];
      }
      let infoWindow = new AMap.InfoWindow({
        content: `<div style="display: flex;justify-content: center;align-items: center;padding: 0.5rem;
        box-shadow: 0 0 1rem rgb(0,0,0)">${res.summary}</div>`,
        offset: new AMap.Pixel(0, -10),
      });
      let marker = new AMap.Marker({
        content: `<div style="width: 1rem;height: 1rem;background-color: #FFFFFF;border-radius: 50%;display: flex;
  justify-content: center;align-items: center;box-shadow: 0 0 1rem rgb(0,0,0)">
  <div style="width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #ffd767"/></div>`,
        map: this.map,
        position: new AMap.LngLat(lng, lat),
        offset: new AMap.Pixel(-8, -8),
      });
      this.listMake.push(marker);
      infoWindow.open(this.map, [lng, lat]);
      infoWindow.on("close", () => {
        this.map.remove(this.listMake);
      });
    },
    //根据年月日获取周几
    getDayOfWeek(dateTime) {
      const date = new Date(dateTime); // 月份是从0开始的，所以传入的月份要减1
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return days[date.getDay()];
    }
  },
  beforeDestroy() {
    if (this.weatherLastDatar) {
      clearInterval(this.weatherLastDatar);
    }
    if (this.leiDaLastDatar) {
      clearInterval(this.leiDaLastDatar);
    }
  },
  destroyed() {
    this.map.destroy();
  },
};
</script>
<style scoped lang="stylus">
//.text-below {
//  font-size: 13px;
//  color: rgba(192, 2, 2, 0.99);
//  position: absolute;
//  bottom: 1px;
//  left: 40%;
//}
//
//.compItem {
//  margin-top: 10px;
//  font-size: 16px;
//}
//
//.compItem:hover {
//  color: #1687ce;
//  cursor: pointer;
//}

// .text-title {
/*background-image: url("~@/assets/images/mapTitleText.png");*/
/*height: calc(5vh);*/
/*background-image: linear-gradient(to top, pink, purple);*/
/*color: transparent;*/
/*-webkit-background-clip: text;*/
/*font-size: 30px;*/
/*font-weight:600;*/
/*color: #3d3d3d;*/
/*position: relative;*/
/*left:40%;*/
// }
.radarPane {
  z-index: 31;
  width: (3900/96)rem;
  background-color: #fff !important;
  border-radius: 0.25rem !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  bottom: 0;
  margin-bottom: 0.5rem !important;
  font-size: (50/96)rem;
}
.colorbar {
  width: auto;
  margin: (25/96)rem (100/96)rem;
}
.slider {
  padding: 10px 50px;
  opacity: 9;
}
.row-block {
  width: auto;
  display: flex;
  flex-direction: row;
  border: 1px solid #444;
  border-right-width: 1px;
  border-right-width: 1px;
}
.one {
  flex: 1;
  text-align: center;
}
.selWindow {
  position: absolute;
  height: (1505/96)rem
  z-index: 1;
  top: (900/96)rem
  right: (240/96)rem
  overflow: hidden;
}
.selWindowIcon {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: (1505/96)rem
  z-index: 2;
  top: (900/96)rem
  right: (240/96)rem
}
::v-deep{
  .el-checkbox__label{
    font-size (90/96)rem
  }
  .el-checkbox{
    padding (35/96)rem (190/96)rem (35/96)rem (35/96)rem !important
  }
}
.tqInfo {
  display flex
  flex-direction column
  align-items center
  justify-content center
  margin (100/96)rem
  height: (2800/96)rem
  width: (4000/96)rem
  padding: (0/96)rem
  background linear-gradient( 200deg, #F3F9FF 0%, #F0F5FF 100%);
  //background-image: url("../../assets/images/shouyebeijing.png");
  //background-size: 100% 100%;
  border: 2px solid #C8D2ED;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  .topWeather{
    width 100%
    height: 65%;
    display flex
    align-items end
    justify-content space-around
    .topWeatherInfo{
      width 65%
      .todayWatherTextNew{
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: (120/96)rem;
        color: #608FF4;
        margin-right (100/96)rem
      }
      .todayWatherTextTNew{
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: (90/96)rem;
        color: #608FF4;
      }
      .todayWatherTextNewTime{
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: (80/96)rem;
        color: #696E83;
        margin (40/96)rem 0
      }
      .bodyWeatherWeek{
        display flex
        align-items center
        justify-content space-between
        width 100%
        margin-top (90/96)rem
        .weekInfo{
          padding (50/96)rem (70/96)rem
          background: #FFFFFF;
          box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42);
          border-radius (50/96)rem
          display flex
          flex-direction column
          align-items center
          justify-content center
          i{
            font-size (120/96)rem
            color #F27D1C
            box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(0,0,0,0.1);
            border-radius 50%
          }
          div{
            margin-top (20/96)rem
            font-weight: 500;
            font-size: (70/96)rem
            color: #4F5874;
          }
        }
      }
      .botWeatherAir{
        width 100%
        margin-top (70/96)rem
        display flex
        justify-content space-between
        .botWeatherAirInfo{
          width (1500/96)rem
          background-color #ffffff
          padding (100/96)rem
          box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42)
          border-radius: (50/96)rem
          .airInfoTitle{
            padding-bottom (80/96)rem
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: (82/96)rem
            color: #515974;
          }
          .airInfoData{
            position relative
            width 100%
            height (420/96)rem
            display flex
            align-items center
            justify-content space-between
            //overflow hidden
            //.leftBut{
            //  font-size (70/96)rem
            //  background-color #e2e7f4
            //  padding (5/96)rem
            //  position absolute
            //  top (150/96)rem
            //  left (-50/96)rem
            //  border-radius 50%
            //  cursor: pointer
            //}
            //.rightBut{
            //  font-size (70/96)rem
            //  background-color #e2e7f4
            //  padding (5/96)rem
            //  position absolute
            //  top (150/96)rem
            //  right (-50/96)rem
            //  border-radius 50%
            //  cursor: pointer
            //}
            .zmdMenu{
              flex-shrink 0
              padding (20/96)rem
              background: #e7ffee;
              border-radius: (50/96)rem
              width (240/96)rem
              height  (400/96)rem
              display flex
              flex-direction column
              align-items center
              justify-content center
              .fxDate{
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: (50/96)rem
                color: #2CB67C;
              }
              .aqi{
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: (50/96)rem
                color: #2CB67C;
                margin (25/96)rem 0
              }
            }
          }
        }
        .weatherDayNight{
          width (1000/96)rem
          background-color #ffffff
          padding (50/96)rem
          height (800/96)rem
          border-radius: (50/96)rem
          box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42);
          display flex
          flex-direction column
          align-items center
          //justify-content space-between
          .weatherDayNightInfo{
            width 100%
            display flex
            align-items center
            //height (150/96)rem
            .title{
              font-family: PingFang SC, PingFang SC;
              font-weight: 600;
              font-size: (50/96)rem
              color: #515974;
              width 40%
              display flex
              justify-content center
              align-items center
              margin-bottom (35/96)rem
              .dayText{
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: (50/96)rem
                color: #C6CCDC
                margin-left (40/96)rem
              }
            }
            .title:first-child{
              width 20%
            }
          }
        }
      }
    }
    .topWeatherText{
      width 28%
      background linear-gradient( 180deg, #88AFFF 0%, #6599FF 100%)
      border-radius (50/96)rem
      height (1600/96)rem
      display flex
      flex-direction column
      align-items center
      justify-content center
      .tempText{
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: (220/96)rem
        margin-bottom (50/96)rem
        color #FFFFFF
      }
      .dateTemp{
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: (80/96)rem
        color: #FFFFFF;
        margin-bottom (30/96)rem
      }
      .weatherInfoSty{
        width 100%
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: (70/96)rem
        color: #FFFFFF
        display flex
        justify-content space-around
        align-items center
        margin-top (50/96)rem
        .titleSty{
          width 50%
          display flex
          justify-content center
          border-right (12/96)rem solid #ffffff
        }
        .titleValue{
          width 50%
          display flex
          justify-content center
        }
      }
    }
  }
  .weatherCharts{
    width 96.5%
    height (800/96)rem
    background-color #ffffff
    border-radius (50/96)rem
    box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42)
    margin (50/96)rem
    //display block
    .eChartsSty{
      height (1000/96)rem
      width: (4000/96)rem
      margin (50/96)rem 0 0 (50/96)rem
    }
  }
}
.tableInfo{
  margin 0 (100/96)rem
  background: #FFFFFF;
  height: (3000/96)rem
  width: (3200/96)rem
  box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}

::v-deep .el-checkbox-group{
  .el-checkbox {
    padding: (30/96)rem (180/96)rem (30/96)rem (30/96)rem
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 (24/96)rem (6/96)rem rgba(0, 0, 0, 0.2);
    border-radius: (120/96)rem
    overflow: visible !important;
    margin-right: 0px !important;
    margin-left: auto !important;
  }
}
//::v-deep .el-checkbox:nth-child(1){
//  background-image: url("../../assets/xinZhiPNG/0@1x.png");
//  background-repeat: no-repeat;
//  background-size: 30px;
//  background-position: 60px 0px;
//}
//::v-deep .el-checkbox:nth-child(2){
//  background-image: url("../../assets/xinZhiPNG/map2.png");
//  background-repeat: no-repeat;
//  background-size: 25px;
//  background-position: 60px 0px;
//}
.mapInfo {
  position: relative;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter,
.fade-leave-to {
  transform: translateX((120/96)rem);
  opacity: 0;
}
/* 水平滚动条 */
::-webkit-scrollbar {
  height: (6/96)rem
}

/* 垂直滚动条 */
::-webkit-scrollbar {
  width: (6/96)rem
}

::v-deep{
  .amap-info-content{
    padding:0;
    width: 15vw
    background: #F8FCFF;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    opacity: 0.95;
    .mapMakerInfo{
      .titleMaker{
        padding (100/96)rem 0 0 (150/96)rem
        border-bottom (10/96)rem solid #d8dbde
        .makerTitleSty{
          width: (500/96)rem
          margin-bottom: (50/96)rem
          font-family PingFang SC, PingFang SC
          font-weight bold
          font-size (90/96)rem
          color #616362
        }
        .makerTitleStyVal{
          font-family PingFang SC, PingFang SC
          font-weight bold
          font-size (70/96)rem
          color #348ED8
          line-height (130/96)rem
        }
      }
      .makerData{
        display: flex
        margin-top: 0.5rem
        padding 0 0 0 (150/96)rem
        .makerDataTitle{
          width (500/96)rem
          font-family PingFang SC, PingFang SC
          font-weight 400
          font-size (80/96)rem
          color #616362
        }
        .makerVal{
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: (80/96)rem
          color: #616362;
        }
        .makerValSty{
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: (80/96)rem
          color: #E7686A;
        }
      }
      .makerData:last-child{
        display: flex
        padding-bottom (100/96)rem
      }
    }
  }
}
</style>
